<template>
    <nav id="navigation" class="row">
        <div class="pre_iconStyle"  @click="navigationBack"  v-show="$route.meta.showHeadNav">
            <span class="icon iconfont icon_style">&#xe618;</span>
        </div>
        <div class="titleStyle">
           {{title}}
        </div>
    </nav>
</template>

<script>
    export default {
        name: "headNav",
        props: {
            title: String
        },
        data: function () {
            return {

            }
        },
        methods: {
            navigationBack: function () {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    nav {
        width: 100%;
        height: 44px;
        line-height:44px;
        position: fixed;
        margin: auto;
        top: 0;
        z-index:9;
        background-color: #2196f3;
        color:#fff;
    }
    .pre_iconStyle{
        width:15%;
        height:44px;
        position: absolute;
        left:0;
    }

    .titleStyle{
        width:70%;
        height:44px;
        position: absolute;
        right:15%;
        font-size:1em;
        font-weight:500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>